<!--
 * @Author: 钱合明
 * @Date: 2022-06-01 15:20:51
 * @LastEditors: 钱合明
 * @LastEditTime: 2022-07-20 14:31:02
 * @FilePath: \dengta-frontend-project\frontend\src\pages\weChart\chat\index.vue
 * @Description:
 * 18156516639
 * Copyright (c) 2022 by 钱合明, All Rights Reserved.
-->
<template>
    <div class="wrap">
        <Row class="dashboard">
            <Col class="col menu-wrap">
                <j-menu ref="accountListRef" @scrollToUnread="handleScrollToUnread" @clearSearchKey="handleClearSearchKey"></j-menu>
            </Col>
            <Col class="col chat-list-wrap">
                <chat-list ref="chatListRef" @searchFriend="handleSearchFriend"></chat-list>
            </Col>
            <Col class="col message-wrap">
                <chat-message></chat-message>
            </Col>
<!--            <Spin size="large" fix v-if="conversionLoading">正在加载全部微信数据，请稍后...</Spin>-->
        </Row>
    </div>
</template>
<script>
    import jMenu from './menu/index';
    import chatList from './chat-list/index.vue';
    import chatMessage from './chat-messages/index.vue';
    import { mapActions, mapMutations, mapState } from 'vuex';
    import { WechatList } from '@api/chat';
    export default {
        name: 'dashboard-console',
        components: {
            jMenu,
            chatList,
            chatMessage
        },
        computed: {
            ...mapState('chatwebsocket/wechat', ['conversionLoading', 'currentConversationId'])
        },
        mounted() {
            this.getWechatList();
            // 重置链接
            this.$websocket.closeWebsocket();
            let userInfo = JSON.parse(localStorage.getItem('userinfo'));
            if(userInfo){
                let project_id = localStorage.getItem('currentProject');
                // 超管or项目有权限
                if(parseInt(userInfo.has_wechat_limit) === 1 || (userInfo.wechat_limit_list[project_id] !== undefined && parseInt(userInfo.wechat_limit_list[project_id]) === 1)) {
                    // 建立webwocket链接
                    this.$websocket.createWebSocket();
                }
            }
        },
        methods: {
            ...mapMutations('chatwebsocket/wechat', ['setWechatList']),
            ...mapActions('chatwebsocket/wechat', ['getUnreadMessage']),
            // 双击微信跳转到第一条未读会话
            handleScrollToUnread (item) {
                // console.log('navigate', item);
                // this.$refs.chatListRef.navigateToUnread();
            },
            // 清空搜索框
            handleClearSearchKey () {                       
                this.$refs.chatListRef.clearSearchKey();
            },
            // 搜索好友列表
            handleSearchFriend(e) {
                this.$refs.accountListRef.getFriendList(this.currentConversationId, e.keywords, e.is_unreply ? 1 : 0);
            },
            // 获取左侧微信列表
            getWechatList() {
                WechatList().then(res => {
                    let allChat = this.getAllChat(res);
                    this.setWechatList(allChat);
                });
            },
            getAllChat(list) {
                let arr = [];
                list.forEach(element => {
                    if (element.wechatAccountList.length) {
                        element.wechatAccountList.forEach(item => {
                            item = {
                                ...item,
                                id: element.id,
                                online_num: element.online_num,
                                realname: element.realname,
                                total: element.total,
                                unchat_total_num: element.unchat_total_num
                            };
                            arr.push(item);
                        });
                    }
                });
                return arr;
            }
        }
    };
</script>

<style lang="less" scoped>
.wrap {
    padding:32px 0;
}
.dashboard {
    width: 100%;
    height: calc(~"100vh - 200px");
    // border: 1px solid #ccc;
    box-shadow:5px 10px 25px #c3c3c3;
    flex-flow: nowrap;
    .col {
        height: 100%;
    }
    .menu-wrap {
        flex: 0 0 180px;
    }
    .chat-list-wrap {
        flex: 0 0 260px;
    }
    .message-wrap {
        flex: 1;
    }
}
</style>
